<script setup lang="ts">
import Header from '@/components/layout/Header.vue';
import Footer from '@/components/layout/Footer.vue';
import Loading from '@/components/common/Loading.vue';
import { ElScrollbar, ElTooltip } from 'element-plus';
import 'element-plus/es/components/scrollbar/style/css';
import 'element-plus/es/components/tooltip/style/css';
import { getList, logo } from '@/apis/currency';
import { CoinItem, Logo } from '@/interfaces/currency';
import { getList1 } from '@/apis/hycurrency'
import { userStore } from '@/store/user';
import { useCoinStore } from '@/store/coin';
import { formatNumberWithThousands } from '@/utils/utils';
import { computed, onMounted, ref, getCurrentInstance, watch, onUnmounted } from 'vue';
import router from '@/router';
import Button from '@/components/common/Button.vue';
const currencyId = ref<string>()
const instance = getCurrentInstance()
let currencySocket: any
const loveList = computed(() => {
    const data = list.value?.filter(item => userStore().loveList.includes(item.currencyPair.split('-')[0]))
    return data
})
getList1()
const connectCurrency = () => {
    if (currencyId.value) {
        currencySocket.unsubscribe(currencyId.value, '/topic/market')
    }
    currencyId.value = Date.now().toString(36) + Math.floor(Math.random() * 1000).toString(36)
    currencySocket.subscribe(currencyId.value, `/topic/market`, (data: CoinItem) => {
        let item = list.value?.find(item => item.currencyPair === data.currencyPair)
        if (item) {
            item.src = "https://file.uhx.io/" + logoList.value[item.currencyPair.split('-')[0]]
            Object.assign(item, data)
        }
        item = data
    })
}
const obj = computed(() => {
    let info = {} as any
    useCoinStore().coinPriceList.forEach(item => {
        info[item.coinName] = item
    })
    return info
}) as any

const tabList = ref([
    { name: '自选', key: 'selfSelected', left: '8px' },
    { name: '币种', key: 'currency', left: '66px' },
    { name: '现货', key: 'spot', left: '124px' },
    { name: '合约', key: 'contract', left: '182px' },
])
const activeTab = ref('selfSelected')
const isLoading = ref(true)
const list = ref<CoinItem[]>([])
const logoList = ref<Logo>({})
const hotList = computed(() => {
    return JSON.parse(JSON.stringify(list.value.slice(0, 3)))
})
const increaseList = computed(() => {
    return JSON.parse(JSON.stringify(list.value)).sort((a: any, b: any) => b.percent - a.percent).slice(0, 3)
})
const declineList = computed(() => {
    return JSON.parse(JSON.stringify(list.value)).sort((a: any, b: any) => a.percent - b.percent).slice(0, 3)
})
const dealList = computed(() => {
    return JSON.parse(JSON.stringify(list.value)).sort((a: any, b: any) => b.amount * b.total - a.amount * a.total).slice(0, 3)
})
const getListFn = async () => {
    logoList.value = await logo()
    const data = await getList();
    data.map((item, i) => {
        if (i < 8) {
            item.checked = true
        } else {
            item.checked = false
        }
        item.src = "https://file.uhx.io/" + logoList.value[item.currencyPair.split('-')[0]]
        return item
    })
    list.value = data
    isLoading.value = false
}
const goTrade = (item: CoinItem) => {
    const name = item.currencyPair.split('-')[0]
    useCoinStore().setCoinName(name)
    useCoinStore().setCoinPrice(item.amount + '')
    router.push('/trade')
}
const addLove = () => {
    if (list.value.every(item => !item.checked)) return
    const loveList = list.value.filter(item => item.checked).map(item => item.currencyPair.split('-')[0])
    loveList.forEach(item => {
        userStore().addLoveItem(item)
    })
}
onMounted(() => {
    document.title = '加密货币市场 | 币价和市值 | UHX'
    getListFn()
})
onUnmounted(() => {
    if (currencySocket) {
        currencySocket.unsubscribe(currencyId.value, '/topic/market')
    }
})
watch(() => userStore().currencySocket, (val) => {
    if (val) {
        if (instance) {
            currencySocket = instance.appContext.config.globalProperties.$currencySocket
            if (currencySocket.connected) {
                connectCurrency()
            }
        }
    }
}, { immediate: true })
</script>

<template>
    <div>
        <Header />
        <ElScrollbar :height="'calc(100vh - 64px)'">
            <div class="sm:px-[24px] px-[16px] max-w-[1248px] mx-auto">
                <div class="text-[20px] font-bold h-[28px] leading-[28px] py-[24px] dark:text-[#EAECEF]">总览</div>
                <div class="w-full flex gap-[16px]">
                    <div
                        class="w-1/4 border-solid border-[1px] border-[#ededed] dark:border-[#333b47] rounded-[12px] p-[8px] pt-[16px]">
                        <div class="flex justify-between items-center text-[12px] px-[8px] mb-[8px]">
                            <div>热门</div>
                            <div>更多</div>
                        </div>
                        <template v-if="!isLoading">
                            <div v-for="item, i in hotList" :key="i" @click="goTrade(item)"
                                class="h-[24px] py-[8px] flex items-center gap-[10px] px-[8px] cursor-pointer hover:bg-[#fafafa] justify-between">
                                <div class="w-1/3 flex items-center ">
                                    <img :src="item.src" class="w-[24px] h-[24px] mr-[6px]" />
                                    <div class="text-[14px]">{{ item.currencyPair.split('-')[0] }}</div>
                                </div>
                                <div class="w-1/3 text-[14px] lg:block hidden">${{
                                    obj[(item.currencyPair.split('-')[0])]?.unitDecimals
                                        ?
                                        formatNumberWithThousands(item.amount.toFixed(obj[(item.currencyPair.split('-')[0])].unitDecimals))
                                        : formatNumberWithThousands(item.amount) }}</div>
                                <div class="w-1/3 text-right text-[14px]"
                                    :class="[item.percent > 0 ? 'text-rise' : 'text-fall']">{{ item.percent >= 0 ? '+' :
                                        ''
                                    }}{{ Number(item.percent *
                                        100).toFixed(2) }}%
                                </div>
                            </div>
                        </template>
                        <div v-else class="h-[120px] flex items-center justify-center">
                            <Loading />
                        </div>
                    </div>
                    <div
                        class="w-1/4 border-solid border-[1px] border-[#ededed] dark:border-[#333b47] rounded-[12px] p-[8px] pt-[16px]">
                        <div class="flex justify-between items-center text-[12px] px-[8px] mb-[8px]">
                            <div>涨幅榜</div>
                            <div>更多</div>
                        </div>
                        <template v-if="!isLoading">
                            <div v-for="item, i in increaseList" :key="i" @click="goTrade(item)"
                                class="h-[24px] py-[8px] flex items-center gap-[10px] px-[8px] cursor-pointer hover:bg-[#fafafa] justify-between">
                                <div class="w-1/3 flex items-center">
                                    <img :src="item.src" class="w-[24px] h-[24px] mr-[6px]" />
                                    <div class="text-[14px]">{{ item.currencyPair.split('-')[0] }}</div>
                                </div>
                                <div class="w-1/3 text-[14px] lg:block hidden">${{
                                    obj[(item.currencyPair.split('-')[0])]?.unitDecimals
                                        ?
                                        formatNumberWithThousands(item.amount.toFixed(obj[(item.currencyPair.split('-')[0])].unitDecimals))
                                        : formatNumberWithThousands(item.amount) }}</div>
                                <div class="w-1/3 text-right text-[14px]"
                                    :class="[item.percent > 0 ? 'text-rise' : 'text-fall']">{{ item.percent >= 0 ? '+' :
                                        ''
                                    }}{{ Number(item.percent *
                                        100).toFixed(2) }}%
                                </div>
                            </div>
                        </template>
                        <div v-else class="h-[120px] flex items-center justify-center">
                            <Loading />
                        </div>
                    </div>
                    <div
                        class="w-1/4 border-solid border-[1px] border-[#ededed] dark:border-[#333b47] rounded-[12px] p-[8px] pt-[16px]">
                        <div class="flex justify-between items-center text-[12px] px-[8px] mb-[8px]">
                            <div>跌幅榜</div>
                            <div>更多</div>
                        </div>
                        <template v-if="!isLoading">
                            <div v-for="item, i in declineList" :key="i" @click="goTrade(item)"
                                class="h-[24px] py-[8px] flex items-center gap-[10px] px-[8px] cursor-pointer hover:bg-[#fafafa] justify-between">
                                <div class="w-1/3 flex items-center">
                                    <img :src="item.src" class="w-[24px] h-[24px] mr-[6px]" />
                                    <div class="text-[14px]">{{ item.currencyPair.split('-')[0] }}</div>
                                </div>
                                <div class="w-1/3 text-[14px] lg:block hidden">${{
                                    obj[(item.currencyPair.split('-')[0])]?.unitDecimals
                                        ?
                                        formatNumberWithThousands(item.amount.toFixed(obj[(item.currencyPair.split('-')[0])].unitDecimals))
                                        : formatNumberWithThousands(item.amount) }}</div>
                                <div class="w-1/3 text-right text-[14px]"
                                    :class="[item.percent > 0 ? 'text-rise' : 'text-fall']">{{ item.percent >= 0 ? '+' :
                                        ''
                                    }}{{ Number(item.percent *
                                        100).toFixed(2) }}%
                                </div>
                            </div>
                        </template>
                        <div v-else class="h-[120px] flex items-center justify-center">
                            <Loading />
                        </div>
                    </div>
                    <div
                        class="w-1/4 border-solid border-[1px] border-[#ededed] dark:border-[#333b47] rounded-[12px] p-[8px] pt-[16px]">
                        <div class="flex justify-between items-center text-[12px] px-[8px] mb-[8px]">
                            <div>成交榜</div>
                            <div>更多</div>
                        </div>
                        <template v-if="!isLoading">
                            <div v-for="item, i in dealList" :key="i" @click="goTrade(item)"
                                class="h-[24px] py-[8px] flex items-center gap-[10px] px-[8px] cursor-pointer hover:bg-[#fafafa] justify-between">
                                <div class="w-1/3 flex items-center">
                                    <img :src="item.src" class="w-[24px] h-[24px] mr-[6px]" />
                                    <div class="text-[14px]">{{ item.currencyPair.split('-')[0] }}</div>
                                </div>
                                <div class="w-1/3 text-[14px] lg:block hidden">${{
                                    obj[(item.currencyPair.split('-')[0])]?.unitDecimals
                                        ?
                                        formatNumberWithThousands(item.amount.toFixed(obj[(item.currencyPair.split('-')[0])].unitDecimals))
                                        : formatNumberWithThousands(item.amount) }}</div>
                                <div class="w-1/3 text-right text-[14px]"
                                    :class="[item.percent > 0 ? 'text-rise' : 'text-fall']">{{ item.percent >= 0 ? '+' :
                                        ''
                                    }}{{ Number(item.percent *
                                        100).toFixed(2) }}%
                                </div>
                            </div>
                        </template>
                        <div v-else class="h-[120px] flex items-center justify-center">
                            <Loading />
                        </div>
                    </div>
                </div>
                <div class="pt-[30px] h-[40px] flex items-center gap-[26px] relative">
                    <div @click="activeTab = item.key" v-for="item, i in tabList" :key="i"
                        :class="[item.key === activeTab ? 'text-black dark:text-[#EAECEF]' : 'text-[#a3a1a1] dark:text-[#707A8A]']"
                        class="cursor-pointer ">{{
                            item.name }}</div>
                    <div class="w-[16px] h-[3px] absolute bottom-0  bg-primary-400"
                        :style="{ left: tabList.find(item => item.key === activeTab)?.left }"></div>
                </div>
                <div v-show="activeTab === 'selfSelected'">
                    <template v-if="!loveList.length">
                        <template v-if="list.length">
                            <div class="flex gap-[16px] mt-[30px]">
                                <div class="w-1/4 border-solid border-[1px] border-[#ededed] dark:border-[#333b47] rounded-[12px] py-[16px] px-[12px] hover:border-primary-400 cursor-pointer"
                                    v-for="item, i in list.slice(0, 4)" :key="i" @click="item.checked = !item.checked">
                                    <div class="h-[68px] flex flex-col justify-between">
                                        <div class="flex justify-between items-center">
                                            <div class="flex items-center">
                                                <span class="text-[18px] dark:text-[#EAECEF]">{{
                                                    item.currencyPair.split('-')[0] }}</span>
                                                <span
                                                    class="text-[16px] text-[#9c9c9c] dark:text-[#707A8A]">/USDT</span>
                                            </div>
                                            <div>
                                                <div :class="[item.checked ? 'bg-black border-black dark:bg-[#EAECEF] dark:border-[#EAECEF]' : 'bg-white dark:bg-dark-bg']"
                                                    class="w-[12px] h-[12px] border-solid border-[1px] border-[#9C9C9C] rounded-[2px] flex items-center justify-center flex-shrink-0">
                                                    <span class="iconfont icon-xuanze text-[12px] "
                                                        :class="[item.checked ? 'block text-white dark:text-dark-bg' : 'hidden']"></span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="flex justify-between items-center">
                                            <div>{{ obj[(item.currencyPair.split('-')[0])]?.unitDecimals
                                                ?
                                                formatNumberWithThousands(item.amount.toFixed(obj[(item.currencyPair.split('-')[0])].unitDecimals))
                                                : formatNumberWithThousands(item.amount) }}</div>
                                            <div :class="[item.percent > 0 ? 'text-rise' : 'text-fall']"
                                                class="font-bold">{{
                                                    item.percent >= 0 ?
                                                        '+' :
                                                        ''
                                                }}{{ Number(item.percent *
                                                    100).toFixed(2) }}%</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="flex gap-[16px] mt-[16px]">
                                <div class="w-1/4 border-solid border-[1px] border-[#ededed] dark:border-[#333b47] rounded-[12px] py-[16px] px-[12px] hover:border-primary-400 cursor-pointer"
                                    v-for="item, i in list.slice(4, 8)" :key="i" @click="item.checked = !item.checked">
                                    <div class="h-[68px] flex flex-col justify-between">
                                        <div class="flex justify-between items-center">
                                            <div class="flex items-center">
                                                <span class="text-[18px] dark:text-[#EAECEF]">{{
                                                    item.currencyPair.split('-')[0] }}</span>
                                                <span
                                                    class="text-[16px] text-[#9c9c9c] dark:text-[#707A8A]">/USDT</span>
                                            </div>
                                            <div>
                                                <div :class="[item.checked ? 'bg-black border-black dark:bg-[#EAECEF] dark:border-[#EAECEF]' : 'bg-white dark:bg-dark-bg']"
                                                    class="w-[12px] h-[12px] border-solid border-[1px] border-[#9C9C9C] rounded-[2px] flex items-center justify-center flex-shrink-0">
                                                    <span class="iconfont icon-xuanze text-[12px] "
                                                        :class="[item.checked ? 'block text-white dark:text-dark-bg' : 'hidden']"></span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="flex justify-between items-center">
                                            <div>{{ obj[(item.currencyPair.split('-')[0])]?.unitDecimals
                                                ?
                                                formatNumberWithThousands(item.amount.toFixed(obj[(item.currencyPair.split('-')[0])].unitDecimals))
                                                : formatNumberWithThousands(item.amount) }}</div>
                                            <div :class="[item.percent > 0 ? 'text-rise' : 'text-fall']"
                                                class="font-bold">{{
                                                    item.percent >= 0 ?
                                                        '+' :
                                                        ''
                                                }}{{ Number(item.percent *
                                                    100).toFixed(2) }}%</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="flex justify-center mt-[30px]">
                                <Button @click="addLove"
                                    :class="[list.every(item => !item.checked) ? '!cursor-no-drop  !opacity-50 active:bg-primary-300' : 'cursor-pointer']"
                                    class="h-[56px] w-[400px] leading-[56px] text-[20px] rounded-[12px]">添加自选</Button>
                            </div>
                        </template>
                        <div v-else class="h-[336px] flex items-center justify-center">
                            <Loading />
                        </div>
                    </template>
                    <template v-else>
                        <div
                            class="flex mt-[16px] items-center text-[12px] justify-between dark:hover:bg-[#29313d] text-[#9c9c9c] h-[40px] px-[16px] hover:bg-[#fafafa] rounded-[8px] cursor-pointer">
                            <div class="w-[240px] dark:text-[#707A8A]">名称</div>
                            <div class="w-[180px] text-right dark:text-[#707A8A]">价格</div>
                            <div class="w-[180px] text-right dark:text-[#707A8A]">24h涨跌</div>
                            <div class="w-[180px] text-right dark:text-[#707A8A]">24h最高</div>
                            <div class="w-[180px] text-right dark:text-[#707A8A]">24h最低</div>
                            <div class="w-[220px] text-right dark:text-[#707A8A]">24h成交额</div>
                            <div class="w-[120px] text-right dark:text-[#707A8A]">操作</div>
                        </div>
                        <div v-for="item, i in loveList" :key="i" @click="goTrade(item)"
                            class="flex items-center justify-between  h-[60px] px-[16px] dark:hover:bg-[#29313d] hover:bg-[#fafafa] rounded-[8px] cursor-pointer">
                            <div class="w-[240px] flex items-center">
                                <span @click.stop="userStore().remvoeLoveItem(item.currencyPair.split('-')[0])"
                                    class="iconfont icon-shoucang1 text-[#fcd535]"></span>
                                <div class="ml-[10px] flex items-center">
                                    <span class="font-bold">{{ item.currencyPair.split('-')[0] }}</span>
                                    <span class="text-[14px] "> /USDT</span>
                                </div>
                            </div>
                            <div class="w-[180px] text-right">
                                <div class="">{{ obj[(item.currencyPair.split('-')[0])]?.unitDecimals
                                    ?
                                    formatNumberWithThousands(item.amount.toFixed(obj[(item.currencyPair.split('-')[0])].unitDecimals))
                                    : formatNumberWithThousands(item.amount) }}</div>
                                <div class="mt-[2px] text-[12px] text-[#9c9c9c] dark:text-[#707A8A]">${{
                                    obj[(item.currencyPair.split('-')[0])]?.unitDecimals
                                        ?
                                        formatNumberWithThousands(item.externalPrice.toFixed(obj[(item.currencyPair.split('-')[0])].unitDecimals))
                                        : formatNumberWithThousands(item.externalPrice) }}</div>
                            </div>
                            <div :class="[item.percent > 0 ? 'text-rise' : 'text-fall']"
                                class="font-bold w-[180px] text-right">{{
                                    item.percent >= 0 ?
                                        '+' :
                                        ''
                                }}{{ Number(item.percent *
                                    100).toFixed(2) }}%</div>
                            <div class="w-[180px] text-right">{{ obj[(item.currencyPair.split('-')[0])]?.unitDecimals
                                ?
                                formatNumberWithThousands(item.highest.toFixed(obj[(item.currencyPair.split('-')[0])].unitDecimals))
                                : formatNumberWithThousands(item.highest) }}</div>
                            <div class="w-[180px] text-right">{{ obj[(item.currencyPair.split('-')[0])]?.unitDecimals
                                ?
                                formatNumberWithThousands(item.lowest.toFixed(obj[(item.currencyPair.split('-')[0])].unitDecimals))
                                : formatNumberWithThousands(item.lowest) }}</div>
                            <div class="w-[220px] text-right">{{ item.total }}</div>
                            <div class="w-[120px] text-right">
                                <ElTooltip content="交易" class="group">
                                    <span class="iconfont icon-lazhutu hover:text-primary-400"></span>
                                </ElTooltip>
                            </div>
                        </div>
                    </template>
                </div>
                <div v-show="activeTab === 'currency'" class="mt-[16px]">
                    <div
                        class="flex items-center text-[12px] justify-between text-[#9c9c9c] h-[40px] px-[16px] hover:bg-[#fafafa] dark:hover:bg-[#29313d] rounded-[8px] cursor-pointer">
                        <div class="w-[280px] dark:text-[#707A8A]">名称</div>
                        <div class="w-[180px] text-right dark:text-[#707A8A]">价格</div>
                        <div class="w-[180px] text-right dark:text-[#707A8A]">24h涨跌</div>
                        <div class="w-[180px] text-right dark:text-[#707A8A]">24h成交额</div>
                        <div class="w-[180px] text-right dark:text-[#707A8A]">操作</div>
                    </div>
                    <div v-for="item, i in list" :key="i"
                        class="flex items-center justify-between  h-[60px] px-[16px] dark:hover:bg-[#29313d] hover:bg-[#fafafa] rounded-[8px] cursor-pointer">
                        <div class="w-[280px] flex items-center">
                            <img class="w-[24px] h-[24px]" :src="item.src" />
                            <div class="ml-[10px]  ">{{ item.currencyPair.split('-')[0] }}</div>
                        </div>
                        <div class="w-[180px] text-right">
                            <div class="">{{ obj[(item.currencyPair.split('-')[0])]?.unitDecimals
                                ?
                                formatNumberWithThousands(item.amount.toFixed(obj[(item.currencyPair.split('-')[0])].unitDecimals))
                                : formatNumberWithThousands(item.amount) }}</div>
                            <div class="mt-[2px] text-[12px] text-[#9c9c9c] dark:text-[#707A8A]">${{
                                obj[(item.currencyPair.split('-')[0])]?.unitDecimals
                                    ?
                                    formatNumberWithThousands(item.externalPrice.toFixed(obj[(item.currencyPair.split('-')[0])].unitDecimals))
                                    : formatNumberWithThousands(item.externalPrice) }}</div>
                        </div>
                        <div :class="[item.percent > 0 ? 'text-rise' : 'text-fall']"
                            class="font-bold w-[180px] text-right">{{
                                item.percent >= 0 ?
                                    '+' :
                                    ''
                            }}{{ Number(item.percent *
                                100).toFixed(2) }}%</div>
                        <div class="w-[180px] text-right">{{ item.total }}</div>
                        <div class="w-[180px] text-right">
                            <ElTooltip content="交易" class="group">
                                <span class="iconfont icon-lazhutu hover:text-primary-400"></span>
                            </ElTooltip>
                        </div>
                    </div>
                </div>
            </div>
            <Footer />
        </ElScrollbar>
    </div>
</template>

<style scoped></style>